import React from "react";
import { View, Text, Button, CoverImage } from "@tarojs/components";
import { useDidShow, getTabBar, getCurrentInstance } from "@tarojs/taro";
import headBgPng from "./imgs/head-bg.png";
import iconWallet from "./imgs/icon-wallet.png";
import Level from "../../components/Level";
import MemberNum from "../../components/MemberNum";
import iconManage from "./imgs/icon-manage.png";
import iconGroup from "./imgs/icon-group.png";
import iconGrass from "./imgs/icon-grass.png";
import iconOrder from "./imgs/icon-order.png";
import iconCoupon from "./imgs/icon-coupon.png";
import iconAbout from "./imgs/icon-about.png";

import "./index.less";

const MENU_LIST = [
  {
    icon: iconManage,
    name: "管理",
  },
  {
    icon: iconGroup,
    name: "我的圈子",
  },
  {
    icon: iconGrass,
    name: "种草分享",
  },
  {
    icon: iconOrder,
    name: "订单",
  },
  {
    icon: iconCoupon,
    name: "优惠券",
    new: 3,
  },
  {
    icon: iconAbout,
    name: "关于",
  },
];

const Mine = () => {
  useDidShow(() => {
    const tabbar = getTabBar(getCurrentInstance().page);
    tabbar?.setSelected("mine");
  });
  return (
    <View className="mine">
      <View className="head">
        <CoverImage src={headBgPng}></CoverImage>
        <View className="avator"></View>
        <View className="username">草莓风味</View>
        <View className="circle">
          <View className="level-cont">
            <Level level="purple" />
          </View>
          <View className="member-cont">
            <MemberNum count="900+" />
          </View>
        </View>
        <View className="wallet">
          <View className="wallet-left">
            <View className="wallet-icon">
              <CoverImage src={iconWallet}></CoverImage>
            </View>
            <Text>余额: </Text>
            <Text>0.00</Text>
          </View>
          <Button className="deposit-btn">立即充值</Button>
        </View>
      </View>
      <View className="menu">
        {MENU_LIST.map((menu, index) => {
          return (
            <View key={index} className="menu-item">
              <View className="menu-item-icon">
                <CoverImage src={menu.icon}></CoverImage>
                {menu.new ? (
                  <View className="menu-item-point">{menu.new}</View>
                ) : null}
              </View>
              <View className="menu-item-name">{menu.name}</View>
            </View>
          );
        })}
      </View>
      <View className="banner">
        <View className="banner-item"></View>
      </View>
    </View>
  );
};

export default Mine;
